import { EventDispatcher } from './EventDispatcher.js';
import { containsPoint } from './utils/index.js';

class RectRubber extends EventDispatcher {
    update(rect) {
        this.rect = rect;
        this.ctrls = {
            lt: {
                x: rect.x - 3,
                y: rect.y - 3,
                w: 6,
                h: 6,
                z: 1,
                // fill: '#f0f',
                point: true,
                name: 'lt',
            },
            rt: {
                x: rect.x + rect.w - 3,
                y: rect.y - 3,
                w: 6,
                h: 6,
                z: 1,
                // fill: '#f0f',
                point: true,
                name: 'rt',
            },
            lb: {
                x: rect.x - 3,
                y: rect.y + rect.h - 3,
                w: 6,
                h: 6,
                z: 1,
                // fill: '#f0f',
                point: true,
                name: 'lb',
            },
            rb: {
                x: rect.x + rect.w - 3,
                y: rect.y + rect.h - 3,
                w: 6,
                h: 6,
                z: 1,
                // fill: '#f0f',
                point: true,
                name: 'rb',
            },

            el: {
                x: rect.x - 3,
                y: rect.y + 3,
                w: 6,
                h: rect.h - 6,
                z: 0,
                // fill: '#f0f',
                name: 'el',
            },
            er: {
                x: rect.x + rect.w - 3,
                y: rect.y + 3,
                w: 6,
                h: rect.h - 6,
                z: 0,
                // fill: '#f0f',
                name: 'er',
            },
            et: {
                x: rect.x + 3,
                y: rect.y - 3,
                w: rect.w - 6,
                h: 6,
                z: 0,
                // fill: '#f0f',
                name: 'et',
            },
            eb: {
                x: rect.x + 3,
                y: rect.y + rect.h - 3,
                w: rect.w - 6,
                h: 6,
                z: 0,
                // fill: '#f0f',
                name: 'eb',
            },
            center: {
                ...rect,
                z: 0,
                name: 'center',
            }
        }
        // this.info = this.getInfoBox(rect);
    }

    // getInfoBox(rect) {
    //     let text = this.rect.w + 'x' + this.rect.h;
    //     return {
    //         x: rect.x + rect.w / 2 - 50,
    //         y: rect.y + rect.h + 3,
    //         w: 100,
    //         h: 20,
    //         text: text,
    //     }
    // }

    draw(ctx, ox, oy) {
        ctx.save()

        this.ctrlList.forEach(ctrl => {
            ctx.fillStyle = ctrl.fill ? ctrl.fill : 'rgba(0,0,0,0)';
            if (ctrl.point) {
                ctx.fillStyle = '#fff';
            }
            ctx.fillRect(ctrl.x + ox, ctrl.y + oy, ctrl.w, ctrl.h);
        });


        // draw info
        let text = Math.round(this.rect.w) + ' x ' + Math.round(this.rect.h);
        let w = ctx.measureText(text).width + 6;
        let h = 16;
        let x = this.rect.x + this.rect.w / 2 - w / 2;
        let y = this.rect.y + this.rect.h;
        let padTop = 4;

        ctx.fillStyle = '#f0f';
        ctx.fillRect(x + ox, y + oy + padTop, w, h);

        let x1 = x + w / 2 + ox;
        let y1 = y + h / 2 + oy + padTop;

        ctx.fillStyle = '#fff';
        ctx.font = '10px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(text, x1 + 0.5, y1 + 0.5);
        ctx.restore();

    }

    get ctrlList() {

        let keys = Object.keys(this.ctrls);
        let ctrlList = keys.map(k => this.ctrls[k]);
        ctrlList.sort((a, b) => a.z - b.z);

        return ctrlList;
    }

    mouseIn(x, y) {

        let name = null;

        for (let i = this.ctrlList.length - 1; i >= 0; i--) {
            const ctrl = this.ctrlList[i];
            if (containsPoint(ctrl, x, y)) {
                name = ctrl.name;
                break;
            }
        }

        return name

    }
}

export { RectRubber };